<template>
  <div id="app">
    <div class="box">
      <div class="v-html" v-html="loading[index]" v-show="isHtml"></div>
      <div class="v-text" v-text="loading[index]" v-show="!isHtml"></div>
      <div></div>
    </div>
    <div class="btn">
      <div class="change-btn" @click="isHtml = !isHtml">{{ isHtml ? "查看源码" : "查看示例" }}</div>
      <div class="loading-btn">
        <div class="loading-btn-item" @click="index = 0">1</div>
        <div class="loading-btn-item" @click="index = 1">2</div>
        <div class="loading-btn-item" @click="index = 2">3</div>
      </div>
    </div>
  </div>
</template>
<script>
import "../assets/css/loading.css"

import { ref } from 'vue'

export default {
  setup() {
    const loading = [`<div class="sk-chase">
        </div>`];
    const isHtml = ref(true);
    const index = ref(0);

    function changeShow() {
      this.isHtml = !this.isHtml
    }
    return {
      loading,
      isHtml,
      index,
      changeShow
    }
  }
}
</script>
<style>
body {
  margin: 0;
  padding: 0;
}

.loading {
  width: 100%;
  height: 100vh;
}
</style>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
  